<template>
    <div id="login-main">
        <div class=box1>
            <p class="text">JETRON登录界面</p>
        </div>
        <div class="box2">
        <el-form ref="form" :model="form" :rules="rules" label-width="60px">
        <el-form-item prop="username" class="username">
          <el-input placeholder="请输入用户名" v-model="form.username">
            <template slot="prepend">
              <i class="el-icon-user"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password" class="password">
          <el-input
            placeholder="请输入密码"
            v-model="form.password"
            type="password"
          >
            <template slot="prepend">
              <i class="el-icon-lock"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-button type="primary" class="btn" @click="submitForm('form')"
          >登录</el-button
        >
       <a href="#" @click="help()">忘记密码？寻求帮助</a>
       <a href="/zhuce" @click="zhuce()">还没账号？快去注册</a>
      </el-form>
      </div>
    </div>
</template>
<script>
export default{
    data(){
        return{
        form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入正确的账号", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入正确的密码", trigger: "blur" },
        ],
      },
        }
    },
    methods:{
    submitForm(form){
        console.log(this.form);
         this.$router.push("/index");
    }
}
}

</script>
<style lang="scss" scoped>
#login-main{
    position: relative;
    height: 100%;
    width: 100%;
    background: url("../assets/bg11.jpg")no-repeat center;
    background-size:100% 100%;
}
.box1{
    position: absolute;
    top: 8%;
    left: 6%;
}
.text{
    color: azure;
    margin: 100px;
    font-size: 48px;
}
.box2{
    position: absolute;
    top:30%;
    right: 10%;
    border-radius: 10px;
    background-color: azure;
}
    .username {
      width: 380px;
      margin-top: 45px;
      margin-right: 40px;
    }
    .password {
      width: 380px;
      margin-right:40px;
    }
    .btn {
      width: 250px;
      margin: 40px 0 0 100px;
    }
    a {
      display: block;
      margin: 20px 0 0 140px;
      font-size: 15px;
      width: 150px;
      margin-bottom: 30px;
    }

</style>